import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
import "./App.less";
import Login from "./views/backend/login";
import Home from "./views/backend/index";
import Users from "./views/backend/users";
import Operation from "./views/backend/operation";
import Setting from "./views/backend/setting";

import { isMobile } from "@utils";
var isM = isMobile();

import React, { useState, useEffect } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, AreaChartOutlined, UsergroupAddOutlined, AppstoreOutlined } from "@ant-design/icons";
import { Layout, Menu, Button, theme } from "antd";
const { Header, Sider, Content } = Layout;

let lastCurr='';

function App() {
	const navigate = useNavigate();
	window.navigate=navigate;
	const [collapsed, setCollapsed] = useState(false);
	const [current, setCurrent] = useState("/");
	const onClick = e => {
		setCurrent(e.key);
		navigate(e.key);
	};
	useEffect(() => {
		setInterval(function(){
			let p = window.location.pathname;
			if(lastCurr==p||p == "/login") return;
			lastCurr=p;
			console.log("pathname", p);
			setCurrent(p);
		},300);
	}, []);

	return (
		<div className="App">
			{window.location.href.indexOf("login") != -1 ? (
				<Login />
			) : (
				<Layout>
					<Sider
						trigger={null}
						collapsible
						collapsed={collapsed}
						style={{
							overflow: "auto",
							height: "100vh",
							position: "fixed",
							left: 0,
							top: 0,
							bottom: 0
						}}>
						<div className="sider-logo-box">
							<span>Decloud</span>
							<label>backend</label>
						</div>
						<Menu
							theme="dark"
							mode="inline"
							onClick={onClick}
							selectedKeys={[current]}
							defaultSelectedKeys={["/"]}
							items={[
								{
									key: "/",
									icon: <AreaChartOutlined />,
									label: "Home"
								},
								{
									key: "/users",
									icon: <UsergroupAddOutlined />,
									label: "Users"
								},
								{
									key: "/operation",
									icon: <AppstoreOutlined />,
									label: "Operation"
								},
								{
									key: "/setting",
									icon: <UploadOutlined />,
									label: "Setting"
								}
							]}
						/>
					</Sider>
					<Layout
						style={{
							marginLeft: 200
						}}>
						<Content
							style={{
								padding: 20,
								minHeight: collapsed?0:280,
								// background: colorBgContainer
							}}>
							<div className="containner222">
								<Routes>
									<Route path="/" element={<Home />} />
									<Route path="/users" element={<Users />} />
									<Route path="/operation" element={<Operation />} />
									<Route path="/setting" element={<Setting />} />
									{/* <Route path="/block/:q" element={<BlockDetail />} />
									<Route path="/transfer/:q" element={<TransferDetail />} />
									<Route path="/miner/" element={<MinerList />} />
									<Route path="/miner/:q" element={<MinerDetail />} />
									<Route path="/account/" element={<AccountList />} />
									<Route path="/account/:q" element={<AccountDetail />} />
									<Route path="/statistics" element={<Statistics />} />
									<Route path="/demo" element={<Demo />} /> */}
								</Routes>
							</div>
						</Content>
					</Layout>
				</Layout>
			)}
		</div>
	);
}

export default App;
